<template>
	<div class="multiRoles-wrapper">
		<div class="left-userTree content-wrapper">
			<span class="title">人员选择</span>
			<organization-tree
				v-if="treeShow"
				ref="userTree"
				:type="2"
				@getNodeInfo="getRoleList"
				:propsParam="personTreeParam"
			></organization-tree>
		</div>
		<div class="right-roleList content-wrapper">
			<div class="button-wrapper">
				<span class="systemButtonAdd" @click="addRole">新增</span>
			</div>
			<el-table
				class="systemTable"
				:data="roleList"
				ref="table"
				stripe
				tooltip-effect="dark"
				style="width: 100%"
				@row-click="rowClick"
			>
				<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
				<el-table-column prop="deptName" label="所属部门" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="operation" label="操作" align="center" show-overflow-tooltip>
					<template>
						<!-- <div class="row changeDept" @click="changeDept">
							<span class="icon iconfont iconbiaoge-genghuanbumen"></span>
							<span class="operation">更换部门</span>
						</div>-->
						<div class="row delete">
							<span class="icon iconfont iconbiaoge-shanchu"></span>
							<span class="operation" @click="roleDelete">删除</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="maskCenter" v-if="dialogVisible">
			<div class="systemDialog" style="width: 600px; height: 645px;">
				<div class="dialog-header" v-winmove>
					<span>{{dialogTitle}}</span>
				</div>
				<div class="dialog-body">
					<div class="trees-wrapper roleTree" v-if="!onlyChangeDept">
						<span class="title">角色选择</span>
						<organization-tree :type="1" @getNodeInfo="getNewRole" :propsParam="roleTreeParam"></organization-tree>
					</div>
					<div :class="onlyChangeDept?'trees-wrapper deptTree onlyChangeDept':'trees-wrapper deptTree'">
						<span class="title">部门选择</span>
						<organization-tree
							:type="0"
							:checkBoxShow="1"
							@handleCheckChange="getNewDepts"
							:propsParam="deptTreeParam"
						></organization-tree>
					</div>
				</div>
				<div class="dialog-footer right">
					<span class="systemButtonConfirm" @click="dialogConfirm">确定</span>
					<span class="systemButtonCancel" @click="dialogVisible = false">取消</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import OrganizationTree from '@/system/components/organizationTree'
import {
	roleUserList,
	roleDelete,
	updateRoleUserDept,
} from '@/system/api/organization/multiRoles'
import winmove from '@/directives/winmove'

export default {
	data() {
		return {
			personTreeParam: { userFlag: true, parentId: 0 },
			roleTreeParam: { parentId: 0, type: 1 },
			deptTreeParam: { userFlag: false, parentId: 0 },
			roleList: [],
			userInfo: {},
			roleInfo: {},
			dialogVisible: false,
			dialogTitle: '新增',
			newRoleId: '',
			newDepts: [],
			onlyChangeDept: false,
			treeShow: false,
		}
	},
	directives: {
		winmove,
	},
	components: {
		OrganizationTree,
	},
	mounted() {
		this.treeShow = true
	},
	methods: {
		// 角色列表 获取
		getRoleList(e) {
			if (e.clickType && e.type === 2) {
				this.userInfo = e
				roleUserList({ userId: e.id }).then((res) => {
					if (res.success) {
						this.roleList = res.info
					} else this.message(res.msg, 3)
				})
			} else {
				this.userInfo = ''
				this.roleList = []
			}
		},
		// 角色列表 点击
		rowClick(e) {
			this.roleInfo = e
		},
		// 角色 删除
		roleDelete() {
			this.messageBox('确认删除？').then((c) => {
				if (c.action) {
					roleDelete({
						roleId: this.roleInfo.roleId,
						userId: this.roleInfo.userId,
						deptId: this.roleInfo.deptId,
					}).then((res) => {
						if (res.success) {
							this.message(res.msg, 1)
							this.getRoleList(this.userInfo)
						} else this.message(res.msg, 3)
					})
				}
			})
		},
		getNewRole(e) {
			if (e.clickType && e.type) {
				this.newRoleId = e.id
			} else {
				this.newRoleId = ''
			}
		},
		getNewDepts(e) {
			this.newDepts = e
		},
		// 新增角色
		addRole() {
			if (!this.userInfo.id) {
				this.message('请选择人员', 3)
				return
			}
			this.onlyChangeDept = false
			this.dialogVisible = true
			this.dialogTitle = '新增'
			this.newRoleId = ''
			this.newDepts = []
		},
		// 更换部门
		// changeDept() {
		// 	this.newDepts = []
		// 	this.onlyChangeDept = true
		// 	this.dialogVisible = true
		// 	this.dialogTitle = '更换部门'
		// },
		dialogConfirm() {
			if (this.onlyChangeDept && !this.newDepts.length) {
				// this.message('请选择需要更换的部门', 3)
				// return
			} else {
				if (!this.newRoleId) {
					this.message('请选择角色', 3)
					return
				}
				if (!this.newDepts.length) {
					this.message('请选择部门', 3)
					return
				}
			}
			let deptIds = this.newDepts[0].id
			for (let i = 1; i < this.newDepts.length; i++) {
				deptIds = deptIds + ',' + this.newDepts[i].id
			}
			updateRoleUserDept({
				roleId: this.roleInfo.roleId
					? this.roleInfo.roleId
					: this.newRoleId,
				userId: this.userInfo.id,
				deptIds: deptIds,
			}).then((res) => {
				if (res.success) {
					this.dialogVisible = false
					this.getRoleList(this.userInfo)
					this.message(res.msg, 1)
				} else {
					this.message(res.msg, 3)
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.multiRoles-wrapper {
	height: 100%;
	display: flex;
	.left-userTree {
		width: 235px;
		margin-right: 12px;
		overflow: auto;
		text-align: left;
		.title {
			text-align: left;
			display: inline-block;
			position: relative;
			font-size: 16px;
			font-weight: bold;
			color: var(--organization-tabs-text-color);
			height: 52px;
			line-height: 52px;
			padding-left: 28px;
			margin-bottom: 0;
			width: 100%;
			&::before {
				content: '';
				display: block;
				width: 4px;
				height: 20px;
				background: rgba(83, 167, 255, 1);
				border-radius: 2px;
				position: absolute;
				left: 16px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.right-roleList {
		width: calc(100% - 247px);
		.button-wrapper {
			text-align: right;
			padding: 12px 20px;
			.systemButtonAdd::before {
				display: none;
			}
		}
		.el-table {
			height: calc(100% - 52px);
			overflow: auto;
			::v-deep.el-table__body-wrapper td:last-child .cell {
				display: inline-flex;
				justify-content: center;
				.row {
					// margin-right: 24px;
					cursor: pointer;
					// &.changeDept .icon {
					// 	font-size: 13px;
					// 	color: rgba(81, 167, 254, 1);
					// 	margin-right: 10px;
					// }
					&.delete .icon {
						font-size: 13px;
						color: rgba(249, 73, 99, 1);
						margin-right: 10px;
					}
				}
			}
		}
	}
	.systemDialog .dialog-body {
		display: flex;
		// flex-direction: random($limit: 1);
		.trees-wrapper {
			background: rgba(255, 255, 255, 0);
			border: 1px solid rgba(204, 204, 204, 1);
			border-radius: 6px;
			// width: calc(100% - 24px);
			width: 50%;
			overflow: auto;
			text-align: left;
			&.deptTree {
				margin-left: 12px;
			}
			.title {
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				color: var(--organization-tabs-text-color);
				display: inline-block;
				padding: 15px 16px;
				margin: 0;
			}
			.organizationTree-wrapper .content-wrapper .el-tree {
				background-color: transparent;
			}
			&.onlyChangeDept {
				margin-left: 12px;
				width: calc(100% - 24px);
			}
		}
	}
}
</style>